<template>
  <div
    :style="{height: height === 'auto' ? '200px' : height + 'px'}"
    style="width:182px;background:red"
  >
    <div style="">
      <div style="color:#006F4DFF; fontSize:14px">{{data.number[0]}}</div>
      <div style="display:flex; justify-content: space-between; align-items: center;margin-top:8px">
        <div style="color:#006F4DFF;">
          <div style="margin-top:-4px;margin-left:-8px;width: 127px;height: 11px; fontSize:10px;-webkit-transform:scale(0.84,0.84);white-space:nowrap;">保障相关电站数量(座)及占比</div>
        </div>
        <div style="color:#fff;font-size:14px;padding-right:4px">{{data.rate[0]}}%</div>
      </div>
      <div
        style="height:20px; width:100%"
        ref="myChart0"
      >
      </div>
    </div>
    <div style="">
      <div style="color:#006F4DFF; fontSize:14px">{{data.number[1]}}</div>
      <div style="display:flex; justify-content: space-between; align-items: center;">
        <div style="color:#006F4DFF;">
          <div style="margin-top:-4px;margin-left:-8px;width: 127px;height: 11px; fontSize:10px;-webkit-transform:scale(0.84,0.84);white-space:nowrap;">保障相关线路数量(条)及占比</div>
        </div>
        <div style="color:#fff;font-size:14px">{{data.rate[1]}}%</div>
      </div>
      <div
        style="height:20px; width:100%"
        ref="myChart1"
      >
      </div>
    </div>
    <div style="">
      <div style="color:#006F4DFF; fontSize:14px">{{data.number[2]}}</div>
      <div style="display:flex; justify-content: space-between; align-items: center;">
        <div style="color:#006F4DFF;">
          <div style="margin-top:-4px;margin-left:-8px;width: 127px;height: 11px; fontSize:10px;-webkit-transform:scale(0.84,0.84);white-space:nowrap;">保障相关线路长度及占比</div>
        </div>
        <div style="color:#fff;font-size:14px">{{data.rate[2]}}%</div>
      </div>
      <div
        style="height:20px; width:100%"
        ref="myChart2"
      >
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      data: {
        rate: [29, 78, 65], // 占比
        number: [2389, 5180, 11891], // 数量
      }, // 得到的%
      defaultConfig: {
        numberName: "保障流线总数量 (条)",
        xName: "数据",
      },
      height: 126,
    };
  },
  mounted() {
    this.drawChart(this.data.rate[0], this.$refs.myChart0);
    this.drawChart(this.data.rate[1], this.$refs.myChart1);
    this.drawChart(this.data.rate[2], this.$refs.myChart2);
  },
  methods: {
    drawChart(rate, myChartRef) {
      var myChart = echarts.init(myChartRef);
      var option = {
        // 标题
        title: {
          show: this.showName,
          text: this.title,
        },
        grid: {
          // 直角坐标系内绘图网格
          left: "-13", //grid 组件离容器左侧的距离,x
          //left的值可以是80这样具体像素值，
          //也可以是'80%'这样相对于容器高度的百分比
          top: "2",
          right: "2%",
          bottom: "10",
          containLabel: true, //gid区域是否包含坐标轴的刻度标签。为true的时候，
          // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
          //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
        },
        xAxis: {
          //直角坐标系grid中的x轴,
          //一般情况下单个grid组件最多只能放上下两个x轴,
          //多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。
          type: "value", //坐标轴类型,分别有：
          //'value'-数值轴；'category'-类目轴;
          //'time'-时间轴;'log'-对数轴
          splitLine: {
            show: false,
          }, //坐标轴在 grid 区域中的分隔线
          axisLabel: {
            show: false,
          }, //坐标轴刻度标签
          axisTick: {
            show: false,
          }, //坐标轴刻度
          axisLine: {
            show: false,
          }, //坐标轴轴线
        },
        yAxis: {
          show: false,
          type: "category",
          data: ["a"], //类目数据，在类目轴（type: 'category'）中有效。
          //如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。
        },
        series: [
          //系列列表。每个系列通过 type 决定自己的图表类型
          {
            name: "%", //系列名称
            type: "bar", //柱状、条形图
            barWidth: 8, //柱条的宽度,默认自适应
            data: [rate], //系列中数据内容数组
            itemStyle: {
              //图形样式
              normal: {
                //normal 图形在默认状态下的样式;
                //emphasis图形在高亮状态下的样式
                barBorderRadius: 10, //柱条圆角半径,单位px.
                //此处统一设置4个角的圆角大小;
                //也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
                color: "#00CC83",
              },
            },
            zlevel: 1, //柱状图所有图形的 zlevel 值,
            //zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
          },
          {
            name: "进度条背景",
            type: "bar",
            barGap: "-100%", //不同系列的柱间距离，为百分比。
            // 在同一坐标系上，此属性会被多个 'bar' 系列共享。
            // 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，
            //并且是对此坐标系中所有 'bar' 系列生效。
            barWidth: 8,
            data: [100],
            color: "#006F4E", //柱条颜色
            itemStyle: {
              normal: {
                barBorderRadius: 10,
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style>
</style>